
<template>
    <div class="main">
                       <div class="commenNav">
            <div class="stockNav" @click='backStockManage'>
                <div class="stockIcon"></div>
                <div>库存管理</div>
            </div>
            <div class="catalogBox">
                <ul>
                    <li>
                        <span class="catalogIcon"></span><span class="catalogClass">入库文件上传</span>
                    </li>
                </ul>
            </div>
        </div>
                <div class="basicInfo">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">公司资料</span>
                        <span style="float:right" :class="{colorRedFont:iscolorRedFont_1}">产品批号：</span></div>
                        <div>
                        <input type="text" style="width:320px;" maxlength='30' v-model='batchNumber' :class="{colorRedBorder:iscolorRedBorder_1}">
                        </div>
                        <div v-show="warning_1" class="warnStyle">{{warn_1}}</div>
                    </div>
                     <div>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_2}">生产日期：</span></div>
                        <div class="pickBox" :class="{colorRedBorder:iscolorRedBorder_2}">
                            <el-date-picker v-model="productionDate"type="date"placeholder="选择日期时间" :editable='false'></el-date-picker>
                        </div>
                        <div v-show="warning_2" class="warnStyle">{{warn_2}}</div>
                    </div>
                    <div>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_3}">入库时间：</span></div>
                        <div class="pickBox" :class="{colorRedBorder:iscolorRedBorder_3}">
                            <el-date-picker v-model="inStockDate"type="datetime"placeholder="选择日期时间" :editable='false'></el-date-picker></div>
                        <div v-show="warning_3" class="warnStyle">{{warn_3}}</div>
                    </div>
                    <div>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_4}">入库负责人：</span></div>
                        <div><input type="text" maxlength='10' v-model='storageWarehouseManager' :class="{colorRedBorder:iscolorRedBorder_4}"></div>
                        <div v-show="warning_4" class="warnStyle">{{warn_4}}</div>
                    </div>
                    <div class="lastBox">
                        <div class="box"></div>
                        <div><input type="text" style="width:320px;" :class="{colorRedBorder:iscolorRedBorder_5}" v-model='fileName' disabled>
                        <input type="file" id='upload' style="display:none" @change='handleFile'><label for="upload" class="uploadButton">文件上传</label>
                        <span v-show="warning_5" class="warnStyle" style="padding-left:40px;display:inline-block;">{{warn_5}}</span>
                        </div>
                    </div>
                     <div>
                    <button class="button" @click='save' :disabled='saveBtn'>保存</button>
                    </div> 
                </div>
                       <!--提示框-->
        <div id="tipMsg" v-show="istipMsg">
            <div class="approval-leave-bg">
                <div class="tipBox">
                    <div>
                        <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                    </div>
                    <div>
                        <p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
                        <div class="yesNo">
                            <input type="button" value="取消" id="yes" @click="cancle">
                            <input type="button" value="确定" id="no" @click="changePath">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                inStockDate: new Date().getTime(),
                batchNumber: '',
                productionDate: '',
                storageWarehouseManager: '',
                fileName: '',
                file: null,
                iscolorRedFont_1: false,
                iscolorRedFont_2: false,
                iscolorRedFont_3: false,
                iscolorRedFont_4: false,
                iscolorRedFont_5: false,
                iscolorRedBorder_1: false,
                iscolorRedBorder_2: false,
                iscolorRedBorder_3: false,
                iscolorRedBorder_4: false,
                iscolorRedBorder_5: false,
                warning_1: false,
                warning_2: false,
                warning_3: false,
                warning_4: false,
                warning_5: false,
                warn_1: '产品批号不能为空和只能为数字!',
                warn_2: '生产日期不能为空',
                warn_3: '入库时间不能为空',
                warn_4: '不能为空和符号',
                warn_5: '上传文件不能为空或格式不正确',
                upload: false,
                istipMsg: false,
                intercept: false,
                toPath: '',
                saveBtn:false,
            }
        },
        filters: {

        },
        created: function() {

        },
        beforeRouteLeave(to, from, next) {
            this.toPath = to.path
            if (this.intercept == false) {
                this.istipMsg = true
            } else if (this.intercept == true) {
                this.istipMsg = false
                next()
            }
        },
        methods: {
            cancle: function() {
                this.istipMsg = false
            },
            changePath: function() {
                this.intercept = true
                this.$router.push({
                    path: this.toPath
                })
            },
            save() {
                if (this.batchNumber == '' || !/^[0-9]*$/.test(this.batchNumber)) {
                    this.iscolorRedFont_1 = this.iscolorRedBorder_1 = this.warning_1 = true;
                    this.upload = false;
                }
                if (this.productionDate == '' || this.productionDate == undefined) {
                    this.iscolorRedFont_2 = this.iscolorRedBorder_2 = this.warning_2 = true;
                    this.upload = false;
                }
                if (this.inStockDate == '' || this.inStockDate == undefined) {
                    this.iscolorRedFont_3 = this.iscolorRedBorder_3 = this.warning_3 = true;
                    this.upload = false;
                }
                if (this.storageWarehouseManager == '' || !/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(this.storageWarehouseManager)) {
                    this.iscolorRedFont_4 = this.iscolorRedBorder_4 = this.warning_4 = true;
                    this.upload = false;
                }
                if (this.fileName == '') {
                    this.iscolorRedFont_5 = this.iscolorRedBorder_5 = this.warning_5 = true;
                    this.upload = false;
                }
                if (this.upload == true) {
                    this.saveBtn = true;
                    this.$store.commit('showLoading');
                    let formdata = new FormData();
                    formdata.append('file', this.file)
                    formdata.append('fileName', this.fileName)
                    formdata.append('batchNumber', this.batchNumber)
                    formdata.append('productionDate', this.UnFormatDate(this.productionDate))
                    formdata.append('storageWarehouseDate', this.formatDate(this.inStockDate))
                    formdata.append('storageWarehouseManager', this.storageWarehouseManager)

                    this.inStockFileUpload(formdata).then((data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.$message.success(data.message);
                            this.intercept = true;
                            this.$router.push({
                                path: '/home/stockmanage'
                            });
                        } else {
                            this.$message(data.message);
                        }
                        this.$store.commit('hiddenLoading');
                        this.saveBtn = false;
                    }).catch(msg => console.log(msg))
                }
            },
            // 处理上传文件
            handleFile(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(xml)$/i.test(files[0].name) || !files.length) {
                    this.iscolorRedFont_5 = this.iscolorRedBorder_5 = this.warning_5 = true;
                    return;
                } else {
                    this.file = files[0];
                    this.fileName = files[0].name;
                }
            },
            // 请求格式化日期
            UnFormatDate(date) {
                let y, m, d,
                    t = new Date(date);
                y = t.getFullYear();
                m = t.getMonth() + 1;
                d = t.getDate();
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
            },
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            },
            // 返回列表组件
            backStockManage() {
                this.$router.push({
                    path: '/home/stockmanage'
                })
            },
            ...mapActions(['inStockFileUpload'])
        },
        watch: {
            batchNumber: function(o) {
                if (o != '') {
                    this.iscolorRedFont_1 = this.iscolorRedBorder_1 = this.warning_1 = false;
                    this.upload = true;
                }
            },
            productionDate: function(o) {
                if (o != '' && o != undefined) {
                    this.iscolorRedFont_2 = this.iscolorRedBorder_2 = this.warning_2 = false;
                    this.upload = true;
                }
            },
            inStockDate: function(o) {
                if (o != '' && o != undefined) {
                    this.iscolorRedFont_3 = this.iscolorRedBorder_3 = this.warning_3 = false;
                    this.upload = true;
                }
            },
            storageWarehouseManager: function(o) {
                if (o != '') {
                    this.iscolorRedFont_4 = this.iscolorRedBorder_4 = this.warning_4 = false;
                    this.upload = true;
                }
            },
            fileName: function(o) {
                if (o != '') {
                    this.iscolorRedFont_5 = this.iscolorRedBorder_5 = this.warning_5 = false;
                    this.upload = true;
                }
            }
        }
    }

</script>
<style scoped>
    .commenNav {
        display: inherit;
    }
    
    .stockNav {
        cursor: pointer;
        width: 132px;
        height: 50px;
        line-height: 50px;
        padding-left: 38px;
        float: left;
    }
    
    .basicInfo {
        margin-top: 10px;
        background: #fff;
        padding: 20px 0 0 40px;
        height: calc(100vh - 150px);
        overflow-x: hidden;
    }
    
    .basicInfo>div>div {
        float: left;
        padding-left: 40px;
    }
    
    .lastBox {
        border-bottom: 1px solid #DDD;
        padding-bottom: 30px;
    }
    
    .basicInfo input {
        width: 180px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        padding-left: 10px;
        background-color: #fff;
    }
    
    input {
        font-size: 14px
    }
    
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
    }
    
    .basicInfo>div {
        margin: 25px 0;
        overflow: hidden;
    }
    
    .box {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    
    .box span {
        float: right;
        color: #333;
    }
    
    .box input {
        padding: 0 5px;
        margin-left: 40px;
    }
    
    .el-date-editor.el-input {
        width: 182px;
        position: absolute;
        top: -2px;
        left: -1px;
    }
    
    .pickBox {
        height: 32px;
        width: 180px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .uploadButton {
        width: 80px;
        height: 32px;
        line-height: 30px;
        background-color: #fff;
        border: 1px solid #43DCE7;
        border-radius: 5px;
        box-sizing: border-box;
        color: #43DCE7;
        margin-left: 20px;
        text-align: center;
        font-weight: inherit;
        cursor: pointer;
    }
    
    .button {
        width: 150px;
        color: #fff;
        background: #43dce7;
        border-radius: 5px;
        margin-left: 323px;
        height: 32px;
        border: none;
    }
    
    .colorRedFont {
        color: #E74343!important;
    }
    
    .colorRedBorder {
        border: 1px solid #E74343!important;
    }
    
    .warnStyle {
        line-height: 32px;
        margin-left: 10px;
        color: #E74343;
    }
    
    .stockIcon {
        width: 24px;
        height: 24px;
        margin: 13px 10px 13px 0;
        overflow: hidden;
        float: left;
    }
    
    .catalogBox {
        float: left;
        height: 50px;
        line-height: 50px;
    }
    
    .specialMain {
        height: calc(100vh - 107px);
    }

</style>

